<template>
    <section v-cloak>
        <div class="left-manu" :style="{backgroundColor:themeColor}">
            <div class="icon-area">
                 <i class="el-icon-info"></i>
                 <span class="page-title" v-if="!isCollapse">Element UI</span>
            </div>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :background-color="themeColor"
                text-color="#ffffff"
                :collapse="isCollapse">
                <el-submenu index="2" background-color="#ccc">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
        <!-- <el-row class="tac">
            <el-col :span="4">
                <el-radio-group v-model="isCollapse">
                    <el-radio-button :label="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                
            </el-col>
        </el-row> -->
    </section>
</template>
<script>
import store from '@/store';
export default {
    name:'GlobalLayout',
    data(){
        return {
             isCollapse: false,
             themeColor: store.getters.color
        }
    },
    mounted(){
        console.log(store.getters)
    },
    methods:{
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style lang="less">
.left-manu{
    max-width: 256px;min-height:100vh;
    .icon-area{
        padding-left:20px;border-right: solid 1px #e6e6e6;color: #fff;font-size: 18px;font-weight: bold;background-color:#002140;height: 50px;line-height: 50px;
    }
    .page-title{margin-left: 10px;}
}
</style>

